<template>
    <div class="branch_info">
        <x-header :left-options="{backText: ''}">党支部</x-header>
        <div class="infos">
            <div class="infosTitle">{{infos.department}}</div>
            <div class="infosImg">
              <img :src="annex" alt="" v-if="isImg">
              <video :src="annex" v-else-if="isVideo" controls autoplay></video>
              <img :src="normalImg" alt="" v-else>
            </div>
            <div class="infosContent">
                {{infos.desc}}
            </div>
        </div>
    </div>
</template>

<script>
import { XHeader } from "vux";
import { mapGetters } from "vuex";
export default {
  components: {
    XHeader
  },
  computed: {
    ...mapGetters(["branchInfo"])
  },
  watch: {
    branchInfo: function(Value) {
      this.infos = Value;
      if (JSON.parse(Value.appendix).length) {
        this.annex = JSON.parse(Value.appendix)[0].url;
        var regexp_video = /\.(?:mp4|avi|wmv|rm|rmvb|mkv)$/i;
        this.isVideo = regexp_video.test(this.annex);
        var regexp_image = /\.(?:jpg|jpeg|png|gif|bmp4)$/i;
        this.isImg = regexp_image.test(this.annex);
      }
    }
  },
  created() {
    // this.$store.dispatch("getBranchInfo", { id: this.$route.params.branchid });
  },
  activated() {
    this.isImg = false;
    this.isVideo = false;
    this.$store.dispatch("getBranchInfo", { id: this.$route.params.branchid });
  },
  deactivated() {},
  data() {
    return {
      infos: {},
      annex: "",
      isVideo: false,
      isImg: false,
      normalImg: require("./detail.png")
    };
  }
};
</script>

<style lang="less">
.branch_info {
  width: 100%;
  font-size: 0;
  min-height: 100%;
  background: url("./dzb_bg.png") no-repeat;
  background-size: 100% 100%;
  .infos {
    width: 100%;
    min-height: 100%;
    padding: 2.875rem 0.625rem 0;
    .infosTitle {
      padding: 1rem 0 0;
      margin-bottom: 1.125rem;
      font-size: 1.1875rem;
      color: rgb(0, 0, 0);
      font-weight: bold;
    }
    .infosImg {
      width: 100%;
      height: 11.1875rem;
      margin-bottom: 0.5rem;
      background: #000;
      img {
        width: 100%;
        height: 100%;
      }
      video {
        width: 100%;
        height: 100%;
      }
    }
    .infosContent {
      font-size: 1rem;
      text-indent: 2em;
      color: rgb(51, 51, 51);
    }
  }
}
</style>